<template>
	<transition name="slide">
		<music-list :title="title" :bg-image="bgImage" :songs="songs"></music-list>
	</transition>
</template>

<script>
	import { mapGetters } from 'vuex';
	import { getSingerDetail } from '@/service/singer';
	import { processSongs } from '@/service/song';
	import MusicList from '@/components/music-list/music-list';

	export default {
		name: 'SingerDetail',
		data() {
			return {
				songs: []
			}
		},
		computed: {
			bgImage() {
				return this.singer.pic;
			},
			title() {
				return this.singer.name;
			},
			...mapGetters(['singer'])
		},
		async created() {
			this.songs = [];
			if (!this.singer.mid) {
				this.$router.push('/singer');
				return;
			}
			const result = await getSingerDetail(this.singer.mid);
			const songList = await processSongs(result.songs);
			this.songs = songList;
		},
		components: {
			MusicList
		}
	}
</script>

<style lang="stylus" scoped>
	@import "../../common/stylus/variable"

	.slide-enter-active, .slide-leave-active
		transition: all 0.3s

	.slide-enter,.slide-leave-to
		transform: translate(100%, 0)
</style>